<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>视频管理</el-breadcrumb-item>
      <el-breadcrumb-item>视频发布</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form label-width="100px" ref="formRef" :model="form" :rules="formRules">
        <el-form-item label="章节：" prop="chapterId">
          <el-select v-model="form.chapterId">
            <el-option v-for="item in chapters" :key="item.chapterId" :value="item.chapterId" :label="item.chapterName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="videoName">
          <el-input v-model="form.videoName"></el-input>
        </el-form-item>
        <el-form-item label="视频：" prop="videoSourceId">
          <el-upload
            ref="uploadVideoRef"
            action="http://localhost:8081/api/admin/video/uploadVideo"
            :headers="headers"
            :show-file-list="false"
            accept=".mp4, .avi, .flv"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :limit="1">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <template v-if="isShow">
            <vue-aliplayer-v2
            ref="VueAliplayerV2Ref"
            :options="options"/>
            <el-button type="danger" @click="deleteVideo">删除视频</el-button>
          </template>
          <el-input v-show="false" v-model="form.videoSourceId"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import videoApi from '@/api/video'

var token = sessionStorage.getItem('token')

export default {
  data() {
    return {
      options: {
          vid: null,
          playauth: null,
          autoplay: false,
          width: '60%'
      },
      isShow: false,
      headers: {
        token: token
      },
      form: {
        level: undefined,
        chapterId: undefined,
        videoName: '',
        videoSourceId: '',
      },
      formRules: {
        chapterId: [
          { required: true, message: '请选择章节', trigger: 'change' }
        ],
        videoName: [
          { required: true, message: '请输入名称' }
        ],
        videoSourceId: [
          { required: true, message: '请上传视频' }
        ],
      },
    }
  },
  props: {
    mainLevel: {
      type: Number
    }
  },
  watch: {
    mainLevel() {
      this.form.level = this.mainLevel
      this.resetForm()
    }
  },
  created() {
    this.form.level = this.mainLevel
  },
  methods: {
    // 上传成功后  获取视频id 和 视频凭证
    uploadSuccess(data, file, fileList) {
      this.options.vid = data.response.videoId
      this.options.playauth = data.response.videoPlayAuth
      this.form.videoSourceId = data.response.videoId
      this.isShow = true
    },
    uploadError() {
      this.$message.error("上传失败")
    },
    deleteVideo() {
      videoApi.deleteVideo(this.options.vid).then(re => {
          if (re.code === this.ok.code) {
            this.form.videoSourceId = ''
            this.isShow = false
            this.options.vid = null
            this.options.playauth = null
            this.$refs['uploadVideoRef'].clearFiles();
          } else {
            _this.$message.error(re.message)
          }
        })
    },
    submitForm() {
      let _this = this
      this.$refs.formRef.validate((valid) => {
        if (!valid) return false
        videoApi.create(this.form).then(re => {
          if (re.code === _this.ok.code) {
            _this.$router.push('/video/list')
          } else {
            _this.$message.error(re.message)
          }
        })
      })
    },
    resetForm() {
      this.$refs.formRef.resetFields()
      // 如果有视频id 则删除视频
      if (this.options.vid !== null) {
        this.deleteVideo()
      }
    }
  },
  computed: {
    ...mapState('chapter', {
      chapters: state => state.chapters
    }),
    ...mapState('resCode', {
      ok: state => state.OK
    }),
  }
}
</script>

<style lang="less" scoped>

</style>